<template>
  <div class="sliderNav" ref="sliderNav">
    <ul class="sliderNav-content">
      <li v-for="(item, index) in options" @click="changeIndex(index)">
        <router-link to="">
          <!--<i><img :src="item.icon" alt="" onerror="onerror=null;src=''" width="22" height="24"/></i>-->
          <section>
            <p :class="{selected: currentIndex === index}">{{item.content}}</p>
            <!--<p>{{item.instruction}}</p>-->
          </section>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
    import BScroll from 'better-scroll'

    export default {
      name: "slider-nav",
      data () {
        return {
          options: [
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/mx_origin.png',
              instruction: '快速查看，无需排队'
            },
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/mx_origin.png',
              instruction: '快速查看，无需排队'
            },
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/hot_topic.png',
              instruction: '快速查看，无需排队'
            },
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/hot_topic.png',
              instruction: '快速查看，无需排队'
            },
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/hot_topic.png',
              instruction: '快速查看，无需排队'
            },
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/hot_topic.png',
              instruction: '快速查看，无需排队'
            },
            {
              href: '',
              content: '检查报告',
              icon: '../static/img/hot_topic.png',
              instruction: '快速查看，无需排队'
            }
          ],
          currentIndex: 0
        }
      },
      mounted () {
        // this.$nextTick(() => {
        //   this._initSliderNav()
        // })
      //  或者
        setTimeout(() => {
          this._initSliderNav()
        }, 20)
      },
      methods: {
        _initSliderNav () {
         var aa = document.querySelector(".sliderNav")
         this.slider = new BScroll(aa, {
           scrollX: true,
           scrollY: false,
           preventDefault: false
         })
        },
        changeIndex (index) {
          this.currentIndex = index
        }
      }
    }
</script>

<style scoped>
  .sliderNav{
    position: relative;
    display: flex;
    margin-top: 4px;
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #e3e3e3;
  }
  .sliderNav-content{
    text-align: center;
    display: flex;
  }
  .sliderNav-content li{
    flex: 1;
    width: 80px;
    padding: 8px 12px;
  }
  /*.sliderNav-content i img{*/
    /*vertical-align: middle;*/
  /*}*/
  .sliderNav-content section{
    display: inline-block;
    /*margin-left: 5px;*/
    /*vertical-align: middle;*/
    /*text-align: left;*/
  }
  .sliderNav-content section p{
    font-size: 14px;
    color: #717773;
    /*line-height: 16px;*/
  }
  /*.sliderNav-content section p:nth-child(2){*/
    /*margin-top: 4px;*/
    /*font-size: 12px;*/
    /*color: #B1AFB3;*/
  /*}*/
  .sliderNav-content .selected {
    color: #363b38;
    position: relative;
  }
  .sliderNav-content .selected:after {
    position: absolute;
    left: 0;
    bottom: -8px;
    content: "";
    display: block;
    width: 100%;
    border-bottom: 2px solid #61bf83;
  }
</style>
